import React, { useEffect, useState } from 'react'
import "../../style/home/Seckill.scss"
import { RightOutline } from 'antd-mobile-icons'
import { seckill } from "../../apis/home"
import { useNavigate } from 'react-router-dom'

interface time {
    // day: Number| String,
    // hour: Number | String,
    // minute: Number | String,
    // second: Number | String
    day: any,
    hour: any,
    minute: any,
    second: any
}
export default function Seckill(props: any) {
    const navigate = useNavigate()
    let [time, settime] = useState<time>({
        day: 0,
        hour: 0,
        minute: 0,
        second: 0
    })

    let [seckills, setseckills] = useState<any>([])

    useEffect(() => {
        const end = Date.parse((new Date('2023-2-17 24:00')).toDateString())
        countFun(end);

        seckill().then((ok) => {
            setseckills(ok.data)
        })
        return () => {
            // clearInterval(timer)
        }
    }, [])

    let countFun = (end: any) => {

        let now_time = new Date().getTime();
        var remaining = end - now_time;


        let timer = setInterval(() => {
            //防止出现负数
            if (remaining > 1000) {
                remaining -= 1000;
                let day = Math.floor((remaining / 1000 / 3600) / 24);
                let hour = Math.floor((remaining / 1000 / 3600) % 24);
                let minute = Math.floor((remaining / 1000 / 60) % 60);
                let second = Math.floor(remaining / 1000 % 60);

                settime({
                    day: day,
                    hour: hour < 10 ? "0" + hour : hour,
                    minute: minute < 10 ? "0" + minute : minute,
                    second: second < 10 ? "0" + second : second
                })
            } else {
                clearInterval(timer);
                //倒计时结束时触发父组件的方法
                //this.props.timeEnd();
            }
        }, 1000);
    }

    return (
        <div className="seckill">
            <div className="title">
                <div className="left">
                    <span>嗨购秒杀</span>
                    <span>8点场</span>
                    <span><span>{time.hour}</span> : <span>{time.minute}</span> : <span>{time.second}</span></span>
                </div>
                <div className="right">
                    <span>爆款轮番秒</span>
                    <RightOutline />
                </div>
            </div>

            <div className="list">
                {
                    seckills.map((item: any) => {
                        return (
                            <dl className="item" key={item.proid} onClick={() => navigate("/details", { state: { proid: item.proid } })}>
                                <dt><img src={item.img1} alt="" /></dt>
                                <dd>￥{item.originprice}</dd>
                            </dl>
                        )
                    })
                }
            </div>
        </div>
    )
}
